<template>
    <view style="background-color: white;height: 100vh;">
        <view class="top_bg"></view>
        <view class="top">
            <view class="top_button">
                <view class="return" @click="returnPage">
                    <image :src="imageBaseUrl + '/img/return.png'"></image>
                </view>
                <view class="line"></view>
                <view class="homepage" @click="goHome">
                    <image :src="imageBaseUrl + '/img/home.png'"></image>
                </view>
            </view>
            <view>个人信息</view>

        </view>
        <div class="message">
            <div class="title">昵称：</div>
            <div class="content">{{ userInfo.nickname }}</div>
        </div>
        <div class="lines"></div>
        <div class="message">
            <div class="title">性别：</div>
            <div class="content">{{ userInfo.sex == 1 ? '男' : '女' }}</div>
        </div>
        <div class="lines"></div>
        <div class="message">
            <div class="title">生日：</div>
            <div class="content">完善生日信息</div>
        </div>
        <div class="lines"></div>
        <div class="message">
            <div class="title">手机号：</div>
            <div class="content">{{ userInfo.tel }}</div>
        </div>
        <div class="lines"></div>
        <div class="message">
            <div class="title">介绍：</div>
        </div>
        <button class="register" style="width: 70%;" @click="openModal()">退出登录</button>
        <div style="height: 30vh;"></div>
        <uv-modal ref="modalRef" title="" content="是否确定退出登录？" showCancelButton="true" @confirm="confirm" />
    </view>

</template>

<script setup>
import { ref, onMounted } from 'vue'
import config from '../../config/index.js';
const imageBaseUrl = config.image;//图片地址
const userInfo = ref({})//用户信息
// 创建对模态框组件的引用
const modalRef = ref(null);

// 返回
const returnPage = () => {
    uni.navigateBack({
        delta: 1
    });
}
// 打开模态框的方法
const openModal = (ids) => {
    modalRef.value?.open();
    id.value = ids;
};
//  确认按钮点击事件
const confirm = () => {
    console.log('点击确认按钮');
    validateLogin()
};
// 主页
const goHome = () => {
    uni.redirectTo({
        url: '/pages/home/home'
    })
}
//退出登录
const validateLogin = () => {
    //清除所有缓存
    uni.clearStorageSync()
    uni.reLaunch({
        url: '/pages/login/login'
    });
}
//  获取用户信息
onMounted(() => {
    console.log(uni.getStorageSync('token'));
    userInfo.value = uni.getStorageSync('token')
})
</script>

<style lang="scss" scoped>
.register {
    height: 35px;
    margin-left: 15%;
    background-color: #43CF7C;
    border-radius: 5px;
    align-items: center;
    color: #ffffff;
    margin-top: 200px;
    margin-bottom: 20px;
    font-size: 15px;
}

.message {
    display: flex;
    height: 50px;
    align-items: center;
}

.title {
    width: 100px;
    margin-left: 10px;
}

.content {
    color: #8a8a8a;
}

.lines {
    width: 100%;
    background-color: #dfdddd;
    height: 1px;
}

.line {
    width: 1%;
    background-color: #8a8a8a;
    height: 70%;
    margin-top: 5%;
}

.return {
    width: 49.5%;
    height: 100%;
    text-align: center;
    line-height: 25px;
}

.return image {
    width: 20px;
    margin-top: 2px;
    height: 20px;
}

.homepage {
    width: 49.5%;
    height: 100%;
    text-align: center;
    line-height: 25px;
}

.homepage image {
    width: 18px;
    margin-top: 3px;
    height: 18px;
}

.top_button {
    width: 70px;
    height: 25px;
    display: flex;
    border-radius: 15px;
    /* margin-top: 30px; */
    margin-left: 20px;
    margin-right: 19%;
    border: 1px solid rgb(192, 192, 192);
}

.header {
    width: 100%;
    position: sticky;
    top: 80px;
}

.top {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid rgb(203, 203, 203);
    background-color: rgb(255, 255, 255);
    position: sticky;
    top: 30px;
    color: #8a8a8a;
    display: flex;
    align-items: center;
}

.top_bg {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 30px;
    position: sticky;
    top: 0;
}
</style>